<template>
<div class="merchant1">
<Row>
	<Col span="18">
		<Button icon="md-add" shape="circle" type="primary" @click="handleCarAdd">添加</Button>
		<Modal v-model="modal1" title="登记车辆">
			<template #footer>
				<Button type="primary"  @click="handleCarAddSubmit">登记</Button>
			</template>
			<Form ref="formCar" :model="formItem" :label-width="80" :rules="ruleCar">
				<FormItem label="车主" prop="str1">
					<Input v-model="formItem.str1" placeholder="请输入车主姓名"></Input>
				</FormItem>
				<FormItem label="车牌" prop="str2">
					<Input v-model="formItem.str2" placeholder="请输入车牌号码"></Input>
				</FormItem>
				<FormItem label="电话" prop="str3">
					<Input v-model="formItem.str3" placeholder="请输入联系电话"></Input>
				</FormItem>
				<FormItem label="颜色" prop="str4">
					<RadioGroup v-model="formItem.str4">
						<Radio label="蓝" border></Radio>
						<Radio label="绿" border></Radio>
						<Radio label="黄" border></Radio>
					</RadioGroup>
				</FormItem>
			</Form>
		</Modal>
	</Col>
	<Col span="6">
		<Input search enter-button placeholder="车主或车牌" @on-search="handleSearch"/>
	</Col>
</Row>
<br>
<Table ref="table" :max-height="maxHeight" stripe :columns="columns" :data="data" border highlight-row 
	@on-filter-change="handleFilterChange">
	<template #action="{ row, index }">
		<span  v-if="row.register != '挪车码登记'"><Space>
			<Button custom-icon="iconfont icon-laji" @click="handleDeleteRow(row,index)" shape="circle"></Button>
			<Button v-if="row.register == '小程序登记'" icon="ios-eye" @click="vehiclePreview(row, index)" shape="circle"></Button>
		</Space></span>
	</template>
</Table>
<div style="margin: 8px auto;"><Page v-model="page" :total="total" show-total @on-change="handlePageChange"/></div>
<Modal v-model="previewModal" title="行驶证预览" :width="50" :footer-hide="true" :styles="{top: '20px'}">
	<img :src="previewUrl" style="width: 48vw;"/>  
</Modal>
</div>
</template>
<script>
import config from '@/config'
import {dateUtils} from '@/libs/tools.js'
export default{
	data(){
		return {
			columns:[
	        	{title:'挪车码',key:'qr_code',minWidth:120},
	        	{title:'车主',key:'owner',minWidth:100,tooltip:true},
	        	{title:'车牌号',key:'license',minWidth:130},
        		{title:'联系电话',key:'phone',minWidth:130},
        		{title:'绑定时间',key:'time',minWidth:120},
				{title:'车牌颜色',key:'color',minWidth:60},
				{title:'登记渠道',key:'register',minWidth:120
					/* ,filters: [
						{label: '挪车码登记',value: '挪车码登记'},
						{label: '小程序登记',value: '小程序登记'},
						{label: '管理员登记',value: '管理员登记'}
					],
					filterMultiple: false,
					filterMethod (value, row) {
						if (value === '挪车码登记') {
							return row.register=='挪车码登记'
						} else if (value === '小程序登记') {
							return row.register=='小程序登记'
						}else if (value === '管理员登记') {
							return row.register=='管理员登记'
						}
					} */
				},
				{title:'操作',slot:'action',width:120}
	        ],
	        data:[],
			page:1,
			total:0,
	        searchKey:'',
			modal1:false,
			formItem:{},
			ruleCar:{
				str1: [{required: true, message: '车主姓名不能为空', trigger: 'blur' }],
				str2: [{required: true, message: '车牌号码不能为空', trigger: 'blur' }],
				str3: [{required: true, message: '联系电话不能为空', trigger: 'blur' }]
			},
			previewModal:false,
			previewUrl:''
		}
	},
    computed: {
        maxHeight(){
          return window.innerHeight-230
        }
    },
	methods:{
		handleSearch(value){
			this.searchKey=value
			this.getMainMerchant1List(value)
		},
		getMainMerchant1List(searchKey){
			this.$axios.post("mainMerchant1List.action",{str1:this.searchKey,int1:(this.page-1)*10,int2:10}).then(res=>{
				this.total=res.data.total
				this.data=res.data.list
			})
		},
		handleCarAddSubmit(){
			this.$refs.formCar.validate((valid) => {
				if (valid) {
					this.$axios.post("mainMerchant1Add.action",this.formItem).then(res=>{
						if(res.data=='suc'){
							this.$Message.success({content:'登记成功'})
							this.modal1=false
							this.getMainMerchant1List(this.searchKey)
						}else{
							this.$Message.error({content:'登记失败'})
						}
					}) 
				 } 
			})
		},
		handleCarAdd(){
			this.modal1=true
			this.formItem={str4:'蓝'}
		},
		handleDeleteRow(row,index){
			this.$Modal.confirm({title: '确定要删除？',onOk: () => {
				this.$axios.post("mainMerchant1DeleteRow.action",{str1:row.qr_code,str2:this.$store.state.user.userInfo.uname}).then(res=>{
					if(res.data=='suc'){
						this.$Message.success({content:'删除成功'})
						this.getMainMerchant1List(this.searchKey)
					}else{
						this.$Message.error({content:'删除失败'})
					}
				})
			}})
		},
		handlePageChange(e){
			this.page=e
			this.getMainMerchant1List(this.searchKey)
		},
		handleFilterChange(e){
			console.info(e)
		},
		vehiclePreview(row, index){
			this.previewModal=true
			this.previewUrl=config.baseUrl+'doc/tangyin/upload/vehicle/'+row.vehicle_card
		}
	},
	mounted(){
		this.getMainMerchant1List(this.searchKey)
	}
}
</script>
<style scoped>
/* .merchant1{
	padding: 32px;
} */
</style>